<template>
	<view v-if="data">
	     
			<uni-notice-bar single="true" text="这是公告栏" :speed="50"
			scrollable="true" showClose="true" showIcon="true">
			</uni-notice-bar>
			  <uni-swiper-dot :info="carouselItems" :current="current" field="title" mode="nav">
				<swiper
					style="height: 300rpx; padding: 10rpx;"
					:autoplay="true"
					:interval="3000"
					:duration="250"
					circular
					@change="doChanged"
				>
					<swiper-item v-for="(item, index) in carouselItems" :key="index" @click="goDetail(index)">
						<image
							style="width: 750rpx; height: 300rpx;"
							:src="'http://101.96.128.94:9999/' + item.img"
							mode=""
						></image>
					</swiper-item>
				</swiper>
              </uni-swiper-dot>
			  <!-- 遍历自定义数组  建立ui框架 -->
			<view v-for="(value, key) in items" :key="key">
				<view class="header">
					<uni-icons type="shop"></uni-icons>
					<text>{{ value.title }}</text>
				</view>
				<view  style="padding: 6rpx;">
			    <uni-grid :column="2" :showBorder="false" 
			    :square="false" :highlight="false" @change="changeImg"
			    >
				<uni-grid-item v-for="(item,index) in value.data" 
				:key="index">
				<view  class="main">
					<image :src="'http://101.96.128.94:9999/' +item.pic" mode=""></image>
					<view>
					<view>{{item.details}}</view>
					<view>￥{{item.price}}</view>
					<view>{{item.title}}</view>
					<button
						@click="goDetail(item.title, item.href)"
						type="primary"
						size="mini"
					>
						查看详情
					</button>
					</view>
				</view>
				</uni-grid-item>
			    </uni-grid> 
				</view> 
			</view>  
			<uni-grid :column="4" :showBorder="false" :highlight="false">
				<uni-grid-item v-for="(item,index) in 4" :key="index">
					<view style="display: flex; align-items: center; justify-content: center; height: 100%;">
						<image style="width: 100rpx; height: 100rpx;" 
						:src="`/static/icons/icon${item}.png`" 
						mode=""></image>
					</view>
				</uni-grid-item>
			</uni-grid>
			<view v-show="showGoTop" class="btn-gotop" hover-class="active" @click="doGoTop">
				<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'http://101.96.128.94:9999/data/product/index.php',
				data:null,
				current: 0,
				showGoTop:false,
				
			}
		},
		mounted() {
			this.getData();
		},
	onPageScroll(e) {
		this.showGoTop = e.scrollTop>1500
		console.log(e)
	},
		methods: {
			
			doGoTop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:250
				})
			},
			goDetail(title,href){
				// const {href,title} = this.carouselItems[index];
				
				uni.navigateTo({
					url: `/pages/detail/detail?href=${href}&title=${title}`
				});
			},
			doChanged(e){
				// console.log(e);
				this.current = e.detail.current;
			},
	    getData(){
			uni.request({
				url: this.url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.data=res.data;
					console.log(res.data);
				},
				fail: (err) => {
					console.log(err)
				},
				complete: () => {}
			});
		}
		},
		computed: {
			carouselItems() {
				return this.data.carouselItems;
			},
			// 各层ui结构相同 ，可以在这里吧各个结构汇总成一个数组
			items() {
				return [
					{ title: '1F/首页推荐', data: this.data.recommendedItems },
					{ title: '2F/热销单品', data: this.data.topSaleItems },
					{ title: '3F/最新上架', data: this.data.newArrivalItems }
				];
			}
		},
	}
</script>

<style lang="scss">
.btn-gotop{
	position: fixed;
	right: 40rpx;
	bottom: 150rpx;
	
	width: 100rpx;
	height: 100rpx;
	background-color: rgba(0,0,0,0.5);
	border-radius: 50%;
	border: 1px solid #999;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
.active{
	opacity: 0.6;
}	
	
.header{
	padding: 5rpx;
}
.main{
    border-radius: 6rpx;
	margin: 6rpx;

	>image{
		width: 100%;
		height: 260rpx;
	}
	>view{
		padding: 10rpx;
		>view{
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&:first-child{
				font-weight: bold;
			}
			&:nth-child(2){
				font-size: 0.8em;
				color: gray;
				margin: 4rpx 0;
			}
			&:nth-child(3){
				font-size: 1.1em;
				color: red;
				
			}
			
		}
	}
}
</style>
